<template>
  <div class="g-rowl1 styl2">
    <div class="g-topb1">
      <div class="ll">
        <div class="g-titb1">
          <div class="h3">畜产品价格</div>
        </div>
      </div>
      <div class="rr">
        <router-link to="/" class="g-btnb1">
          <img src="@img/b-i1.png" alt="" class="icn" />
          <span>返回首页</span>
        </router-link>
      </div>
      <img src="@img/b-line1.png" alt="" class="line" />
    </div>
    <div class="content">
      <div class="col-l">
        <div class="g-content sty1" style="padding-top: 0;">
          <div class="g-fillter">
            <div class="item">
              <div class="s">市场</div>
              <a-select
                ref="select"
                class="jl-selbox"
                v-model:value="valueA"
                placeholder="请选择"
              >
                <a-select-option value="市场1">市场1</a-select-option>
                <a-select-option value="市场2">市场2</a-select-option>
                <a-select-option value="市场3">市场3</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="s">产品大类</div>
              <a-select
                ref="select"
                class="jl-selbox"
                v-model:value="valueB"
                placeholder="请选择"
              >
                <a-select-option value="产品大类1">产品大类1</a-select-option>
                <a-select-option value="产品大类2">产品大类2</a-select-option>
                <a-select-option value="产品大类3">产品大类3</a-select-option>
              </a-select>
            </div>
            <div class="item">
              <div class="s">采集时间</div>
              <a-range-picker
                v-model:value="dateValue"
                :bordered="false"
                inputReadOnly
                separator="至"
              />
            </div>
            <div class="opts">
              <div class="btn">
                <img src="@img/c-btn2.svg" alt="" />
              </div>
              <div class="btn"><img src="@img/c-btn3.svg" alt="" /></div>
            </div>
          </div>
          <div class="m-tableb1 small flex1">
            <a-table
              bordered
              :dataSource="dataSource"
              :columns="columns"
              :scroll="scroll"
              :pagination="false"
              :row-class-name="
                (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
              "
            >
            </a-table>
          </div>
          <div class="con-bot">
            <div class="l">
              <!-- <div class="add"><span>+</span>新建/编辑</div> -->
            </div>
            <div class="r">
              <div class="g-pages">
                <a-pagination
                  v-model:current="current"
                  v-model:page-size="pageSize"
                  :total="85"
                  showQuickJumper
                  :show-total="
                    (total, range) =>
                      `显示${range[0]}到${range[1]} ,共 ${total} 条记录`
                  "
                ></a-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-r">
        <div
          class="m-handlel"
          :style="'background-image: url(' + getImageUrl('warnbgl2.png') + ');'"
        >
          <div class="m-piebox">
            <div class="ll">
              <div class="box">
                <div class="tit">占比</div>
                <div class="chart">
                  <pie1Chart chartid="pie1" :data="pie1data.data" :color="pie1data.color" ></pie1Chart>
                </div>
              </div>
            </div>
            <div class="rr">
              <div class="line" v-for="(item,index) in pie1data.data" :key="index">
                <div class="l">
                  <div class="dot" :style="'background:'+pie1data. color[index]"></div>
                  <div class="name">{{item.name}}</div>
                </div>
                <div class="num">{{item.percentage}}</div>
              </div>
            </div>
          </div>
          <div class="m-titb2">
            <span class="t">价格走势</span>
            <span class="line"></span>
          </div>
          <div class="m-chartl2 sty1">
            <line1Chart
              :chartid="piedata.chartid" :showLegend="false" unit="(单位：元)"
              :xData="piedata.xData"
              :data="piedata.data"
            ></line1Chart>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import line1Chart from '../components/line1Chart.vue';
import pie1Chart from '../components/pie1Chart.vue';

function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}



const valueA = ref();
const valueB = ref();
const dateValue = ref();


const current = ref(2);
const pageSize = ref(20);

const columns = [
  {
    title: '市场名称',
    dataIndex: 'marketname',
    key: 'marketname',
    width: 200
  },
  {
    title: '产品大类',
    dataIndex: 'type',
    key: 'type',
    width: 120
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 130
  }, {
    title: '计量单位',
    dataIndex: 'unit',
    key: 'unit',
    width: 120
  }, {
    title: '日交易吨数',
    dataIndex: 'weight',
    key: 'weight',
    width: 120
  }, {
    title: '最高价格',
    dataIndex: 'high',
    key: 'high',
    width: 120
  }, {
    title: '最低价格',
    dataIndex: 'low',
    key: 'low',
    width: 120
  }, {
    title: '平均价格',
    dataIndex: 'average',
    key: 'average',
    width: 120
  }, {
    title: '采集时间',
    dataIndex: 'date',
    key: 'date',
    width: 140
  }, {
    title: '送检时间',
    dataIndex: 'date1',
    key: 'date1',
    width: 140
  },
];

const dataSource = ref([
  {
    key: '1',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  },
  {
    key: '2',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '3',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '4',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '5',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '6',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '7',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '8',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '9',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  }, {
    key: '10',
    marketname: '青岛移风蔬菜批发市场有限公司',
    type: '蔬菜',
    name: '芸豆',
    unit: 'KG',
    weight: '0.50',
    high: '8.50',
    low: '8.10',
    average: '8.30',
    date: '2023/10/16',
    date1: '2023/10/16',
  },
]);



const pie1data = reactive({
  color:['#3ef2fc','#ffd12b','#fe8b4c','#fe4c4c','#29cf73'],
  data:[{
    name:'畜禽',
    value:100,
    percentage: '20%'
  },{
    name:'水果',
    value:100,
    percentage: '20%'
  },{
    name:'蔬菜',
    value:100,
    percentage: '20%'
  },{
    name:'水产',
    value:100,
    percentage: '20%'
  },{
    name:'粮油',
    value:100,
    percentage: '20%'
  }]
});
const piedata = reactive({
  chartid: "echartsl2",
  xData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
  data:[{
    name:'',
    data: [30, 31, 32, 31, 30, 31, 32, 31, 30, 31, 32, 31]
  }]
})

// select
const value1 = ref("1");
const scroll=ref({
    x:1200,
    y:640
  })
onMounted(() => {
  scroll.value={
    x: Math.ceil( 62.5*document.body.clientWidth /100),
    y:Math.ceil( 33.33*document.body.clientWidth /100),
  }
}) 


</script>

<style scoped>
.g-rowl1 .g-content{
  height: 850px;
}
.g-rowl1.styl2 .col-r{
    width: 535px;
    padding-top: 67px;
}
@media screen and (min-width: 1920px) {
  .g-rowl1 .g-content{
  height: 44.270833333333336vw;
}
.g-rowl1.styl2 .col-r{
    width: 27.864583333333336vw;
    padding-top: 3.4895833333333335vw;
}
}
</style>
